<template>
  <div>
    <Dialog :title="dialogTitle"  v-model="dialogVisible"
     :width="1000" :height="100" >
      <el-form
        label-width="120px"
        ref="formRef"
        :model="formData"
        :rules="formRules"
        v-loading="formLoading"
      >
<!--        <el-form-item label="类型" prop="productType">-->
<!--          <el-input v-model="formData.productType" hidden="" readonly placeholder="请输入公示表名称" />-->
<!--        </el-form-item>-->

        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>贷款申请基本资料</span>
              <!--            <el-button class="button" text></el-button>-->
            </div>
          </template>
          <!--        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>-->
          <div>
            <el-form-item label="姓名：" prop="names">
              <el-text class="mx-1" v-model="formData.names" size="large">输入项</el-text>
            </el-form-item>
            <el-form-item label="年龄：">
              <el-text class="mx-1" size="large">输入项</el-text>
            </el-form-item>
            <el-form-item label="户籍：">
              <el-text class="mx-1" size="large">A 重庆本地</el-text>
              <el-text class="mx-1" size="large">B 重庆外地</el-text>
            </el-form-item>
            <el-form-item label="户口：">
              <el-text class="mx-1" size="large">A 城市户口</el-text>
              <el-text class="mx-1" size="large">B 农村户口</el-text>
            </el-form-item>
            <!--          <el-form-item label="Activity zone">-->
            <!--            <el-select v-model="formData.region" placeholder="please select your zone">-->
            <!--              <el-option label="Zone one" value="shanghai" />-->
            <!--              <el-option label="Zone two" value="beijing" />-->
            <!--            </el-select>-->
            <!--          </el-form-item>-->
          </div>

        </el-card>

        <el-card>

          <template #header>
            <div class="card-header">
              <span>贷款申请资产信息</span>
              <!--            <el-button class="button" text></el-button>-->
            </div>
          </template>
          <div >
            <el-form-item label-width="120px" label="资产信息名称：">
              <el-text class="mx-1" size="large">房产信息</el-text>
            </el-form-item>
            <el-form-item label-width="130px" label="按揭房所在区域：">
              <el-text class="mx-1" size="large">重庆全区县</el-text>
            </el-form-item>
            <el-form-item label-width="120px" label="土地类型：">
              <el-text class="mx-1" size="large">A 出让地</el-text>
              <el-text class="mx-1" size="large"> B 划拨地</el-text>
            </el-form-item>
            <el-form-item label-width="120px" label="房屋结构：">
              <el-text class="mx-1" size="large">A 钢筋混凝土结构</el-text>
              <el-text class="mx-1" size="large"> B 混合结构</el-text>
            </el-form-item>
            <el-form-item label-width="120px" label="房屋类型：">
              <el-text class="mx-1" size="large">A 住宅</el-text>
              <el-text class="mx-1" size="large"> B 洋房</el-text>
            </el-form-item>
          </div>
        </el-card>


        <el-card>
          <template #header>
            <div class="card-header">
              <span>补充资料内容</span>
              <!--            <el-button class="button" text></el-button>-->
            </div>
          </template>
          <div>

            <el-form-item :label="'类目名称'" prop="categoryName">
              <el-select v-model="categoryName"  placeholder="请选择">
                <el-option
                  v-for="item in typesNameList"
                  :key="item.className"
                  :label="item.className"
                  :value="item.className"
                />
              </el-select>
            </el-form-item>

            <label>添加类目：</label>
            <div v-for="(input, index) in inputList" :key="index" >
                <el-row label-width="220px">
                  <el-form-item  :label="'类目id'" style="display: none">
                  <el-input v-model="input.id"  readonly  ></el-input>
                  </el-form-item>
                  <el-form-item  :label="'类目名称'" style="width: 40%;">
                  <el-input v-model="input.categoryName" readonly  placeholder="请输入类目名称" ></el-input>
                  </el-form-item>
                  <el-form-item  :label="'内容'" style="width: 40%;">
                    <el-input v-model="input.category" placeholder="请输入内容" ></el-input>
                  </el-form-item>
                  <el-button type="danger" style="margin-left: 2px;" @click="removeInput(index)">删除</el-button>
                </el-row>

<!--              <el-button type="danger" style="margin-left: 3px;" @click="removeInput(index)" :icon="Delete" circle />-->
            </div>
          </div>
            <el-button @click="addInput" >添加核查类目</el-button>
        </el-card>

      </el-form>
      <template #footer>
        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
        <el-button @click="closeDialogVisible">取 消</el-button>
      </template>
    </Dialog>
  </div>

</template>
<style>

</style>
<script setup lang="ts">
import * as PublicityTypeApi from '@/api/hutai/publicityType'
import * as ProductApi from '@/api/hutai/product'
import {
  useRouter, useRoute } from 'vue-router';
import { createOrUpdateProducts } from "@/api/hutai/product";

/** vue:
查询路由参数：route.query、route.params、route.path
查询路由地址：router.currentRoute.value.path
 */
  let router = useRouter();
  let route = useRoute();

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const inputList = reactive([])  //项目
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  productType: undefined
})

const inputData = ref({
  id: undefined,
  inputList: undefined
})

const formRules = reactive({
})
const formRef = ref() // 表单 Ref
const  categoryName = ref('');
// console.log(route.query.id)
const typesNameList = ref([]) // 类型列表

const closeDialogVisible = async () => {
  dialogVisible.value = false;
  location.reload();
}


/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ProductApi.getProduct(id)
    } finally {
      formLoading.value = false
    }
  }
  //加载选项
  typesNameList.value = await PublicityTypeApi.getPublicitySelectListByTypesName(formData.value.productType);

  //加载数据
  if (inputList.length<=0){
    let dataList = await ProductApi.getProductsList(formData.value.productType);
    for (var i =0;i<dataList.length;i++){
      inputList.push({categoryName: dataList[i].categoryName,category:dataList[i].category,id:dataList[i].id})
    }
  }
  //console.log(inputList);
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    inputData.id = formData.value.id;
    inputData.inputList = inputList;
    await ProductApi.createOrUpdateProducts(inputData)
    console.log(inputList)
    message.success("操作成功")

    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const addInput = async () => {
  console.log(categoryName.value.length);
  let str = categoryName.value;
  //console.log(categoryName);
  if (categoryName.value.length>0){
    // 点击新增按钮时，向inputList中添加一个新的输入框
    inputList.push({categoryName: str,category:'',id:''})
  }else {
    message.error("请选择类目名称");
  }

}

const removeInput = async (index) => {
  //console.log(index);
  inputList.splice(index, 1); // 删除指定索引的输入框
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    productType: undefined
  }
  console.log(inputList);
  formRef.value?.resetFields()
}
</script>
